<template>
  <div class="fixed left-0 z-1" v-if="props.isShowEditSet">
    <div class="relative">
      <div
        @click="openCover"
        :class="[
          'p-[5px] bg-[#fff] flex justify-center flex-col cursor-pointer pl-[10px] rounded-[20px] absolute z-10',
          isSmall ? 'left-[-8px]' : 'left-[-100px]'
        ]"
        style="box-shadow: 5px 5px 10px rgb(0 0 0 / 25%); transition: all 0.5s"
      >
        <el-icon size="26"><Link /></el-icon>
      </div>
      <div
        :class="['w-[340px] py-[20px] left-[0px] bg-[#fff] absolute overflow-hidden', isSmall ? 'left-[-500px]' : '']"
        style="transition: all 0.3s"
      >
        <ChooseFile
          class="flex flex-row justify-center"
          :width="300"
          :height="200"
          file-type="image"
          v-model:url="resource"
        ></ChooseFile>
        <div class="mt-[20px] flex justify-start flex-row text-[14px] px-[20px]">
          <el-select v-model="nowChoose" @change="chooseGroupItem" placeholder="请选择分组">
            <el-option v-for="(p, index) in props.list" :key="index" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
        <div class="flex flex-row justify-center mt-[20px]">
          <el-button @click="isSmall = true">收起</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChooseFile from "@/components/ChooseFile/index.vue";
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
// 是否最小化
const isSmall = ref(false);
// 打开封面
const openCover = () => {
  isSmall.value = false;
};

// 当前的图片
const resource = ref("");

interface item {
  value: any;
  label: string;
}

interface Props {
  cover?: string;
  group?: number;
  list?: item[];
  isShowEditSet?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  list() {
    return [];
  },
  cover: "",
  isShowEditSet: true
});

const emits = defineEmits(["update:cover", "update:group"]);

// 当前选择
const nowChoose = ref(undefined);
const chooseGroupItem = () => {
  emits("update:group", nowChoose.value);
};

const listenWindowWidth = () => {
  window.innerWidth < 1550 ? (isSmall.value = true) : (isSmall.value = false);
};

onMounted(() => {
  window.innerWidth < 1550 ? (isSmall.value = true) : (isSmall.value = false);
  window.addEventListener("resize", listenWindowWidth);
});

onBeforeUnmount(() => {
  window.removeEventListener("load", listenWindowWidth);
  window.removeEventListener("resize", listenWindowWidth);
});
watch(
  () => resource.value,
  () => {
    emits("update:cover", resource.value);
  }
);
watch(
  () => props.cover,
  () => {
    resource.value = props.cover;
  }
);
watch(
  () => props.group,
  () => {
    nowChoose.value = props.group as any;
  }
);
</script>

<style></style>
